<template>
  <div class="goods-rate">
    <div class="row">
      <div class="rate">
        <div class="tips">好评率</div>
        <div class="score">99.4%</div>
        <!-- 星星组件 -->
        <Star :star="4" />
      </div>
      <!-- 评价标签 -->
      <div class="comment-nav">
        <div class="title">大家都在说：</div>
        <div class="label-list">
          <div class="label" :class="{active: activeLabelId === 0}" @click="selectLabelHandler(0)">全部（{{ total }}）</div>
          <div class="label" :class="{active: activeLabelId === label.id}" v-for="label in labelList" :key="label.id" @click="selectLabelHandler(label.id)">{{ label.name }}（{{ label.amount }}）</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Star from '../common/Star'

export default {
  data () {
    return {
      total: 1280,
      // 激活标签id
      activeLabelId: 0,
      labelList: [
        { id: 1, name: '有图', amount: 128 },
        { id: 2, name: '追评', amount: 65 },
        { id: 3, name: '差评', amount: 18 },
        { id: 4, name: '质量上乘', amount: 32 },
        { id: 5, name: '性价比高', amount: 27 },
        { id: 6, name: '很舒服', amount: 1280 },
        { id: 7, name: '尺码合适', amount: 1208 }
      ]
    }
  },

  methods: {
    /**
     * 选择标签
     * @param { Object } id 当前选中的标签的id
     */
    selectLabelHandler (id) {
      this.activeLabelId = id
      // 通知父组件，展示不同状态的数据
      this.$emit('onChange', id)
    }
  },

  components: {
    Star
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.goods-rate {
  .row {
    display: flex;
    .rate {
      border-right: 1px solid @line-color-light2;
      width: 126px;
      text-align: center;
      .tips {
        color: @font-color-six;
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 15px;
        margin-top: 4px;
      }
      .score {
        font-size: 36px;
        color: @font-color-tag-danger;
        line-height: 36px;
        margin-bottom: 8px;
      }
    }
    .comment-nav {
      flex: 1;
      padding: 4px 20px;
      .title {
        font-size: 14px;
        padding-bottom: 14px;
      }
      .label-list {
        font-size: 14px;
        .label {
          background-color: #F5F3EF;
          border-radius: 100px;
          cursor: pointer;
          display: inline-block;
          margin: 0 10px 10px 0;
          padding: 0 7px 0 16px;
          line-height: 26px;
          &.active {
            background-color: #b4a078;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
